
<template>
    <div class='shadow_page' ref="main">
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="loading-text-intro">
            <p>Loading</p>
        </div>
        <div class="content" style="visibility: hidden">
            <nav class="header">
                <a href="https://github.com/dragonir/threejs-odessey" class="active a"><span>首页</span></a>
                <a href="https://github.com/dragonir/threejs-odessey" class="a"><span>关于</span></a>
                <a href="https://github.com/dragonir/threejs-odessey" class="a"><span>作品</span></a>
                <a href="https://github.com/dragonir/threejs-odessey" class="a"><span>我的</span></a>
                <a href="https://github.com/dragonir/threejs-odessey" class="a"><span>更多</span></a>
                <div class="cursor"></div>
            </nav>
            <section class="section first">
                <div class='info'>
                    <h2 class='name'>DRAGONIR</h2>
                    <h1 class='title'>THREE.JS ODESSEY</h1>
                    <p class='description'>&nbsp;</p>
                </div>
                <canvas id='container1' ref="container1" class='webgl'></canvas>
            </section>
            <section class="section second">
                <div class="second-container">
                    <ul>
                        <li id="one" class="active">入门</li>
                        <li id="two">基础</li>
                        <li id="three">进阶</li>
                    </ul>
                    <p class="text" id="content">昨夜西风凋碧树。独上高楼，望尽天涯路。</p>
                </div>
                <canvas id='container2' ref="container2" class='webgl'></canvas>
            </section>
        </div>
        <a class='github' href='https://github.com/dragonir/threejs-odessey' target='_blank' rel='noreferrer'
            title='dragonir'>
            <svg height='36' aria-hidden='true' viewBox='0 0 16 16' version='1.1' width='36' data-view-component='true'>
                <path fill='#FFFFFF' fillRule="evenodd"
                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
                </path>
            </svg>
        </a>
    </div>
</template>

<script setup lang="ts">
import Box from "./Box";
import { ref, onMounted } from "vue";
const main = ref("main");
const container1 = ref("container1");
const container2 = ref("container2");

onMounted(() => {
    new Box().init({
        main: main.value,
        container1: container1.value,
        container2: container2.value
    });
})
</script>

<style lang="scss" scoped>
.content3d {
    position: relative;
    width: 100%;
    height: 100vh;
}


</style>